<template>
    <div class="admin_box">
        <header>
            <van-uploader v-model="fileList" class="upload" :max-count="1">
                <van-button icon="plus" type="info"></van-button>
            </van-uploader>
            <div class="login_box">
                <h4 class="login"><b @click="login">立即登录</b></h4>
                <p>积分:</p>
            </div>
        </header>
        <van-notice-bar scrollable text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。" />
        <p class="order">
            <b class="order_left">
                <van-icon name="comment-o" />
                <span>我的订单</span>
            </b>
            <b>
                <van-icon name="arrow" />
            </b>
        </p>
        <ul class="buy_shop">
            <li>
                <i class="van-icon van-icon-paid"></i>待付款
            </li>
            <li>
                <i class="van-icon van-icon-send-gift-o"></i>待发货
            </li>
            <li>
                <i class="van-icon van-icon-logistics"></i>待收货
            </li>
            <li>
                <i class="van-icon van-icon-comment-o"></i>待评价
            </li>
        </ul>
        <div class="other">
            <div>
                <i class="van-icon van-icon-gold-coin-o"></i>
                <p>我的余额</p>
            </div>
            <div>
                <i class="van-icon van-icon-edit"></i>
                <p>我的砍价</p>
            </div>
            <div>
                <i class="van-icon van-icon-coupon-o"></i>
                <p>我的礼券</p>
            </div>
            <div>
                <i class="van-icon van-icon-star-o"></i>
                <p>我的收藏</p>
            </div>
            <div>
                <i class="van-icon van-icon-star-o"></i>
                <p>我的地址</p>
            </div>
            <div>
                <i class="van-icon van-icon-service-o"></i>
                <p>联系客服</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            fileList: [
                // { url: "https://img.yzcdn.cn/vant/leaf.jpg" },
                // Uploader 根据文件后缀来判断是否为图片文件
                // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
                // { url: "", isImage: true },
            ],
        };
    },
    methods: {
        login(){
            this.$router.push('/login')
        }
    },
};
</script>

<style lang="scss">
.admin_box {
    background-color: #f5f5f5;
}
header {
    width: 100%;
    height: 20vh;
    display: flex;
    background: #bfb18d;
    .upload {
        width: 30%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        img {
            border-radius: 50%;
        }
    }
    .login_box {
        width: 70%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        text-align: left;
        // justify-content: center;
        h4 {
            width: 100%;
            margin: 6vh 0vw 0 0;
        }
        p {
            width: 40%;
            height: 4vh;
            line-height: 4vh;
            background-color: #b4a37a;
            color: white;
            padding-left: 3vw;
            box-sizing: border-box;
            border-radius: 10px;
        }
    }
}
.order {
    width: 100%;
    height: 6vh;
    display: flex;
    background-color: white;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid gray;
    .order_left {
        width: 30vw;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    b {
        margin: 0 6vw;
    }
}
.buy_shop {
    margin-top: 2vh;
    width: 100%;
    height: 9vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    li {
        height: 80%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        i {
            width: 45%;
            // height: 45%;
            font-size: 30px;
        }
    }
}
.other{
    margin-top: 3vh;
    background-color: white;
    width: 100%;
    height: 20vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    div{
        width: 33%;
        height: 40%;
        font-size: 12px;
        text-align: center;
        i{
            width: 50%;
            font-size: 30px;
        }
    }
}
</style>